<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Icicle - Icicle tree with limited levels shown</title>

<!-- CSS Files -->
<link type="text/css" href="../css/base.css" rel="stylesheet" />
<link type="text/css" href="../css/Icicle.css" rel="stylesheet" />

<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="../../jit.js"></script>

<!-- Example File -->
<script language="javascript" type="text/javascript" src="example2.js"></script>
</head>

<body onload="init();">
<div id="container">

<div id="left-container">

<div class="text">

  <h4>
    Icicle tree with limited levels shown
  </h4>
  
            <p>A static JSON tree representing a file system tree is loaded into
            an Icicle Tree.</p>
            <p>
              <b>Left click</b> to set a node as root for the visualization.
            </p>
            <p>
              <b>Right click</b> to set the parent node as root for the visualization.
            </p>
            

  <div>
    <label for="s-orientation">Orientation: </label>
    <select name="s-orientation" id="s-orientation">
      <option value="h" selected>horizontal</option>
      <option value="v">vertical</option>
    </select>
    <br>
    <div id="max-levels">
    <label for="i-levels-to-show">Max levels: </label>
    <select  id="i-levels-to-show" name="i-levels-to-show" style="width: 50px">
      <option>all</option>
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>
    </div>
  </div>
</div>

<a id="update" href="#" class="theme button white">Go to Parent</a>
 
<div id="id-list"></div>


<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>            
</div>

<div id="center-container">
    <div id="infovis"></div>    
</div>

<div id="right-container">

<div id="inner-details"></div>

</div>

<div id="log"></div>
</div>
</body>
</html>
